<template>
  <div class="right-list">
    <div class="lists-title flex col-center row-between">
      <div class="lists-left color-black bold">竞猜记录</div>
      <div class="lists-right flex col-center">
        <div class="mr-10">
          <DatePicker
            v-model="dateArr"
            type="daterange"
            separator=" 至 "
            :editable="false"
            style="width: 220px"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            >
          </DatePicker>
        </div>
        <div>
          <Button type="primary" @click="handleSearch">查询</Button>
        </div>
      </div>
    </div>
    <div class="table-body mt-16">
      <Table :data="list" :columns="columns" :loading="loading" size="small" height="550px" :border="false">
        <template slot="participation" slot-scope="{ row }" class="row">
            <span v-for="(res,idx) in row.oddsShow" :key="idx">
              <span v-if="res.id == row.oddsId">{{res.name}} {{res.odds}}</span>
            </span>
        </template>
        <template slot="status" slot-scope="{ row }" class="row">
          <span class="color-orange flex col-center" v-if="row.status == 2"><i class="iconfont icon-label mr-2"/> 中奖</span>
          <span v-else class="flex col-center color-muted"><i class="iconfont icon-dis mr-2"/> {{row.status == 1 ? '未开奖' : '未中奖'}}</span>
        </template>
        <template slot="winningMoney" slot-scope="{ row }" class="row">
           <span :class="row.status==2?'statusRed':''">
            {{row.winningMoney}}
          </span>
        </template>
      </Table>
      <div class="lists-page tc" v-if="total">
        <Page :total="total"
              :current.sync="params.pageNum"
              :page-size="params.pageSize"
              @on-change="getList"/>
      </div>
    </div>
  </div>
</template>
<script>
import {betList} from "@/api/guess";
import {dateFormat} from "@/common/utils";

export default {
  name: "recordList",
  props: {
    tabList: {type: Array, default: () => ([])}
  },
  data() {
    return {
      loading: false,
      columns: [
        {title: '活动项目', key: 'gameTypeName',  minWidth: 80, tooltip: true},
        {title: '赛事名称', key: 'gameName', minWidth: 120, tooltip: true},
        {title: '参与项', key: 'participation', minWidth: 80, slot: 'participation', tooltip: true},
        {title: '参与网费', key: 'bettingMoney', minWidth: 60},
        {title: '开奖结果', key:'status', minWidth: 70, slot:'status'},
        {title: '网费', key: 'winningMoney', minWidth: 70, slot: 'winningMoney'},
        {title: '时间', key: 'createTime', minWidth: 100, align: 'right'},
      ],
      list: [],
      dateArr: [],
      params: {
        page: 1,
        pageSize: 20,
        isAsc: 1,
        name: ""
      },
      total: 0,
    }
  },
  computed: {},
  methods: {
    // 获取记录
    handleSearch() {
      this.params.pageNum = 1
      this.list = []
      this.getList()
    },
    getList() {
      let params = this.params
      if(this.dateArr && this.dateArr.length>0) {
        params.startTime = dateFormat(this.dateArr[0], 'yyyy-MM-dd 00:00:00');
        params.endTime = dateFormat(this.dateArr[1], 'yyyy-MM-dd 23:59:59');
      }else{
        params.startTime = ''
        params.endTime = ''
      }
      this.loading = true
      betList(params).then(res => {
        if (res.code == 200) {
          res.rows.map(item => {
            item.oddsShow =  JSON.parse(item.oddsJson)
            let tab = this.tabList.find(tab => tab.type == item.activityType)
            item.gameTypeName = tab ? tab.title : ''
            item.createTime = dateFormat(item.createTime, 'yyyy-MM-dd hh:mm')
          })
          this.list = res.rows
          this.total = res.total
        }
      }).finally(()=>{
        this.loading = false
      });
    },
  },
  watch: {}
}
</script>

<style scoped lang="scss">

</style>
